<template>
  <div class="info-container">
    <Header />
    <div class="pc-info"></div>
    <div>
      <div class="home-button-container">
        <router-link to="/">
          <div class="home-button"></div>
        </router-link>
      </div>
      <div class="info-box">
        <div class="info-title"></div>
        <div class="info-box1"></div>
        <div class="info-box2"></div>
        <div class="info-box3"></div>
        <div class="info-box4">
          <div class="info-prizes">
            <div class="info-prizes-tab">
              <div
                class="info-prizes-tab1"
                :style="{ 'z-index': curInfoTab === 0 ? 3 : 1 }"
                @click="onChangeInfoTab(0)"
              ></div>
              <div
                class="info-prizes-tab2"
                :style="{ 'z-index': curInfoTab === 1 ? 3 : 1 }"
                @click="onChangeInfoTab(1)"
              ></div>
            </div>
            <div>
              <img
                :src="require('../assets/' + (curInfoTab === 0 ? 'individual' : 'group') + '_prize_web.png')"
                alt="图片加载中"
                style="width: 100%"
              />
            </div>
          </div>
        </div>
        <LeftWeChat />
        <RightDownLoad />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
import Header from "../components/Header.vue";
import LeftWeChat from "../components/LeftWeChat.vue";
import RightDownLoad from "../components/RightDownLoad.vue";
export default {
  components: {
    Header,
    LeftWeChat,
    RightDownLoad
  },
  setup() {
    const state = reactive({
      curInfoTab: 0,
    });
    const onChangeInfoTab = (value: number) => {
      state.curInfoTab = value;
    };
    return {
      ...toRefs(state),
      onChangeInfoTab,
    };
  },
};
</script>

<style lang="less">
.info-container {
  .home-button-style {
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home-button-container {
    position: relative;
    background-image: url();
    width: 345px;
    height: 50px;
    margin-bottom: 10.5px;
    .home-button-style;
    .home-button {
      width: 140.5px;
      height: 41px;
      background-image: url();
      background-repeat: no-repeat;
      .home-button-style;
    }
  }
  .info-box {
    width: 345px;
    position: relative;
    & div {
      background-repeat: no-repeat;
    }
    .info-title,
    .info-box1 {
      width: inherit;
      margin-bottom: 5px;
      background-size: contain;
    }
    .info-box2,
    .info-box3 {
      width: inherit;
      margin-bottom: 5px;
      background-size: contain;
    }
    .info-title {
      height: 70px;
      background-image: url();
    }
    .info-box1 {
      height: 150px;
      background-image: url(../assets/info_1.png);
    }
    .info-box2 {
      height: 157.5px;
      background-image: url(../assets/info_2.png);
    }
    .info-box3 {
      height: 509px;
      background-image: url(../assets/info_3.png);
    }
    .info-box4 {
      position: relative;
      margin-top: 9.5px;
      width: inherit;
      margin-bottom: 5px;
      background-size: contain;
      height: 1232px;
      background-image: url(../assets/info_4.png);
      padding: 8.5px;
      .info-prizes {
        position: absolute;
        width: 327.5px;
        height: 50px;
        top: 66.5px;
        .info-prizes-tab {
          position: relative;
          width: inherit;
          height: 31.5px;
          .info-prizes-tab1,
          .info-prizes-tab2 {
            height: inherit;
            position: absolute;
            background-size: cover;
          }
          .info-prizes-tab1 {
            width: 173px;
            background-image: url(../assets/individual_tab.png);
          }
          .info-prizes-tab2 {
            width: 174px;
            left: 153.5px;
            background-image: url(../assets/group_tab.png);
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 960px) {
  .info-container {
    .pc-info {
      position: absolute;
      top: 230.5px;
      width: 228px;
      height: 72px;
      background-size: contain;
      background-image: url("../assets/pc_info.png");
    }
    .home-button-container {
      all: unset;
      position: relative;
      top: -60px;
      .home-button {
        display: inline-block;
        width: 212px;
        height: 61px;
      }
    }
    .info-box {
      width: 960px;
      .info-title {
        height: 290.5px;
        background-image: url("../assets/activity_intro_web.png");
        margin-bottom: 10px;
      }
      .info-box1 {
        height: 0;
      }
      .info-box2 {
        height: 260.5px;
        background-image: url(../assets/info_2_web.png);
        margin-bottom: 10px;
      }
      .info-box3 {
        height: 884px;
        background-image: url(../assets/info_3_web.png);
      }
      .info-box4 {
        height: 2496.5px;
        background-image: url(../assets/info_4_web.png);
        padding: 30px;
        .info-prizes {
          width: 900.5px;
          top: 133.5px;
          .info-prizes-tab {
            height: 62.5px;
            .info-prizes-tab1 {
              width: 480px;
              background-image: url();
            }
            .info-prizes-tab2 {
              width: 480px;
              left: 420.5px;
              background-image: url(../assets/group_tab_web.png);
            }
          }
        }
      }
    }
  }
}
</style>